import React, {Component} from 'react';
import PropTypes from 'prop-types';
import TodoListAdd from './add/TodoListAdd.jsx';
import ListShow from './listShow/ListShow.jsx';

const TodoStore = require('../stores/TodoStore');

class TodoList extends Component {

  constructor(props) {
    super(props);
    this._onChange = this._onChange.bind(this);
    this.state = {
      infoList: TodoStore._getAll()
    };
  }

  static propTypes = {
    text: PropTypes.string,
    defaultChecked: PropTypes.bool,
    index: PropTypes.number,
    listContent: PropTypes.array
  }

  static defaultProps = {

  }

  componentDidMount() {
    TodoStore.addChangeListener(this._onChange);
  }

  componentWillUnmount() {
    TodoStore.removeChangeListener(this._onChange);
  }

  _onChange() {
    this.setState({
      infoList: TodoStore._getAll()
    });
  }

  render() {

    return (
      <div className="container">
        <TodoListAdd />
        <p>未完成:</p>
        <ListShow listContent = {this.state.infoList[0]}/>
        <p>已完成:</p>
        <ListShow listContent = {this.state.infoList[1]}/>
      </div>
    );
  }
}


export default TodoList;
